<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="#"/>
    <link type="text/css" rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div id="vuebox">
        <!--图书分类-->
        <div class="row">
            <div class="col-md-9 col-lg-9" >
                <form class="form-inline" role="form" style="padding-left: 250px;">
                    <div class="form-group" style="padding-left: 20px;">
                        起飞城市:<select v-model="deid">
                                    <option value="0">全部</option>
                                    <option v-for="item in citylist" :value="item.id">{{item.cityname}}</option>
                                </select>
                        -----
                        到达城市:<select v-model="arid">
                                    <option value="0">全部</option>
                                    <option v-for="item in citylist" :value="item.id">{{item.cityname}}</option>
                    </select>
                        <button type="button"  @click="selbtn()">查找</button>
                    </div>

                </form>
            </div>
            <div class="col-md-3 col-lg-3 text-right">
                <a href="javascript:void(0)" @click="openAdd()" class="btn btn-primary">添加信息</a>
            </div>
        </div>
        <!--图书列表-->
        <div class="row">
            <div class="col-md-12">
                <br/>
                <table class="table table-striped" v-show="fightslist.size">
                    <thead>
                    <tr>
                        <th>航班编号</th>
                        <th>起飞城市</th>
                        <th>起飞时间</th>
                        <th>到达城市</th>
                        <th>到达时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in fightslist.list">
                        <td>{{item.flightno}}</td>
                        <td>{{item.departurename}}</td>
                        <td>{{item.departuretime}}</td>
                        <td>{{item.arrivalname}}</td>
                        <td>{{item.arrivaltime}}</td>
                    </tr>
                    </tbody>
                </table>
                <br/>
            </div>
            <div class="col-md-12" v-show="!fightslist.size">
                <h2>非常抱歉，没有找到相关航班!!</h2>
            </div>
        </div>
        <!--上一页下一页-->
        <div class="row">
            <div class="col-md-12" align="center">
                <ul class="pagination ">
                    <li v-show="fightslist.hasPreviousPage"><a href="javascript:void(0)" @click="prev()">&laquo;</a></li>
                    <li :class="{active:fightslist.pageNum==i}" v-for="i in fightslist.navigatepageNums">
                        <a href="javascript:void(0)"  @click="inpage(i)">{{i}}</a>
                    </li>
                    <li v-show="fightslist.hasNextPage"><a href="javascript:void(0)" @click="next()">&raquo;</a></li>
                </ul>
            </div>
        </div>
        <!-- 添加模态框-->
        <div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">航班添加页面</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            航班编号:
                                <input type="text" v-model="fights.flightno" id="flightno"/>
                            <br/>
                            起飞城市:<select v-model="fights.departurecity">
                            <option value="0">请选择起飞城市</option>
                            <option v-for="item in citylist" :value="item.id">{{item.cityname}}</option>
                            </select>
                            起飞时间:<input type="text" v-model="fights.departuretime" id="departuretime"/>
                            <br/>
                            到达城市:<select v-model="fights.arrivalcity">
                                    <option value="0">请选择起飞城市</option>
                                    <option v-for="item in citylist" :value="item.id">{{item.cityname}}</option>
                                </select>
                            到达时间:<input type="text" v-model="fights.arrivaltime" id="arrivaltime"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <!--data-dismiss="modal"-->
                        <a href="#" class="btn btn-primary" @click="save()">保存</a>
                        <button type="button" class="btn btn-default" @click="reset()" >重置</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
    </div>
</div>

</body>
</html>
<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vuebox",
        data:{
            deid:0,
            arid:0,
            citylist:[],
            fightslist:[],
            fights:{id:null,flightno:null,departurecity:0,arrivalcity:0}
        },
        mounted(){
            axios({url:"http://localhost:8080/query/City", method:"get",
                params:{}})
                .then(res=>{this.citylist=res.data.city});
            this.queryAll();
        },methods:{
            queryAll:function () {
                axios({url:"http://localhost:8080/query/Fights", method:"get",
                    params:{deid:this.deid,arid:this.arid, pageNum:this.pageNum, pageSize:this.pageSize}})
                    .then(res=>{this.fightslist=res.data.fight});
            },
            selbtn:function () {
                if(this.deid!=0){
                    if(this.deid==this.arid){
                        alert("起飞地点不能跟到达地点一样!");
                        this.deid=0;
                        this.arid=0;
                        return false;
                    }
                }
                this.queryAll();
            },
            prev:function () {//上一页
                this.pageNum +=-1;
                this.queryAll();
            },
            next:function () {//下一页
                this.pageNum+=+1;
                this.queryAll();
            },
            inpage:function (i) {//页数跳转
                this.pageNum=i;
                this.queryAll();
            },
            openAdd:function () {//打开添加模态框
                this.fights={id:null,flightno:null,departurecity:0,arrivalcity:0}
                $("#AddModal").modal("show");
            },
            save:function () {
                if(this.fights.flightno==null){
                    alert("请输入航班编号!");
                    return false;
                }
                if(this.fights.departurecity==0){
                    alert("请选择出发地点!");
                    return false;
                }
                if(this.fights.arrivalcity==0){
                    alert("请选择到达地点!");
                    return false;
                }
                if(this.fights.departurecity==this.fights.arrivalcity){
                    alert("出发地点不能跟到达地点一样!");
                    return false;
                }
                axios.post("http://localhost:8080/save/Fights",this.fights)
                    .then(res=>{
                        if(res.data.result="SUCCESS"){
                            alert("添加成功!");
                            $("#AddModal").modal("hide");
                            this.fights={id:null,flightno:null,departurecity:0,arrivalcity:0}
                            this.queryAll();
                        }
                    })

            }
        }
    })
</script>